<template>
    <div>

    <div style="height:70px;margin-top: 20px;">

        <el-dialog   v-model="hospitalvisble" width="800px" >
            <span style="font-size: 20px">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;东莞东华医院于1995年4月开业，是一所集医疗、教学、科研、急救、预防、保健、康复为一体的三级甲等综合性医院。医院始终秉承“服务社会，造福桑梓”的办院宗旨，遵循“病人第 一，质量第 一，信誉第 一”的院训，努力提供便捷优质的诊疗服务。医院2005年成为中山大学非直属附属医院，2017年通过三级甲等医院的复审，同年成为国家住院医师规范化培训基地。是“粤港澳大湾区*医院50强”之 一。
                医院现有总院、松山湖院区两个院区，含69个临床科室、9个医技科室、 4个门诊、60个病区，开放床位2430张。其中，总院位于东莞市东城区，设有 46个临床科室、9个医技科室，开放床位1700张；松山湖院区位于松山湖国家高新技术产业开发区，设有31个临床科室、9个医技科室，开放床位730张。
                员工3100余人，高级职称320余人，硕士以上学历380余人。</span>
            <div slot="footer"  class="dialog-footer">
                <center><el-button @click="hospitalvisble= false">返回</el-button>
                </center>
            </div>
        </el-dialog>
        <el-dialog   v-model="phonevisble" width="800px" >
            <span style="font-size: 20px">总 机：0769-2233 3333（总院）
                0769-2283 3333（松山湖院区）
                <br>
                客服预约：0769-2267 6329（总院）
                0769-2289 5930（松山湖院区）
                <br>
                急诊电话：0769-2267 6120（总院）
                0769-2289 2002（松山湖院区）
                <br>
                总院地址：广东省东莞市东城区东城东路1号
                <br>
                松山湖院区地址：广东省东莞市松山湖科发七路1号。</span>
            <div slot="footer"  class="dialog-footer">
                <center><el-button @click="phonevisble= false">返回</el-button>
                </center>
            </div>
        </el-dialog>
        <el-dialog   v-model="visble" width="400px" >
            <div v-for="item in news_info">
                <ul style="font-size: 20px" >
                    <h4>
                        <li >
                            {{item.title}}
                        </li>
                    </h4>
                    {{item.content}}
                </ul>
            </div>
            <div slot="footer"  class="dialog-footer">
                <center><el-button @click="visble= false">返回</el-button>
                </center>
            </div>
        </el-dialog>
        <div style="float: left;margin-left: 100px">
            <img style="height: 70px;" src="../assets/img/top1.jpg" >
            <img src="../assets/img/top2.jpg">
        </div>
        <div style="float: right;margin-top: 20px;margin-right: 100px">
            <img src="../assets/img/top3.jpg">
        </div>
        <br>
         </div>
        <div style="background-color: #2d8cf0;color: white;margin-top: 10px">
            <ul style="margin-left: 208px">
                <li class="Nav" >首页</li>
                <li class="Nav">医院概况</li>
                <li class="Nav">医院动态</li>
                <li class="Nav" >服务指南</li>
                <li class="Nav">科室导航</li>
                <li class="Nav">松山湖学院</li>
                <li class="Nav" >科研教学</li>
                <li class="Nav">人才招聘</li>
                <li class="Nav" style="border-right: 1px solid #5bafe5;">GCP</li>
            </ul>
    </div>
    <div style="background-color: #f0f0f0;">
        <div >
            <center>
                <el-carousel height="300px">
                    <el-carousel-item v-for="item in List" :key="item">
                       <img style="width: 1500px" :src="item">
                    </el-carousel-item>
                </el-carousel>
            </center>
        </div>
        <div class="four" >
            <div class="four_seven" @click="hospitalvisble = true"><center><img src="../assets/img/four_two_one.jpg"><br>医院介绍</center></div>
            <div  class="four_xxx" @click="visble = true"><center><img src="../assets/img/four_two_two.jpg"><br>院内新闻</center></div>
            <router-link :to="{name:'Login'}"><div class="four_yyy" ><center><img src="../assets/img/four_two_three.jpg"><br>门诊预约挂号</center></div></router-link>
            <router-link :to="{name:'MLogin'}"><div class="four_zzz"  ><center><img src="../assets/img/four_two_four.jpg"><br>管理员登录</center></div></router-link>
            </div>
        <div class="six">
            <div class="six_seven" style="background-color: #8795f0 "  @click="phonevisble = true"><center><img src="../assets/img/four_two_five.jpg"><br>联系医院</center></div>
            <router-link :to="{name:'RLogin'}"><div class="six_xxx" style="background-color: #5294f0 "><center><img src="../assets/img/four_two_six.jpg"><br>前台登录</center></div></router-link>
            <a :href="url">
                <div class="six_yyy" style="background-color: #3cbd8d " @click="gotoweixin" ><center><img src="../assets/img/four_two_seven.jpg"><br>器官捐献志愿登记</center>
                </div>
            </a>
            <router-link :to="{name:'insidelogin'}"><div class="six_zzz" style="background-color: #3cbd8d "      ><center><img src="../assets/img/four_two_six.jpg"><br>医生登录</center></div>
            </router-link>

        </div>
<br><br>
        <div class="five">
            <div style="text-align: center;">地址：东莞市东城东路1号 邮编：523110 邮箱：xzb@dgtungwah.com ICP备案号：粤ICP备18054620号-1</div>
        </div>
    </div>
</div>
</template>

<script>
    import axios from "axios";

    export default {
        name: "Homepage",
        data(){
            return{
                List:['https://yljk-dgut.oss-cn-beijing.aliyuncs.com/2021/09/28/images/web-banner1.png','https://yljk-dgut.oss-cn-beijing.aliyuncs.com/2021/09/28/images/web-banner2.png',
                'https://yljk-dgut.oss-cn-beijing.aliyuncs.com/2021/09/28/images/web-banner3.png'],
                currentIndex: 0,   //默认显示图片
                timer: null,    //定时器
                news_info:{
                    id:'',
                    title:'',
                    content:''
                },
                url:'https://register.codac.org.cn/',
                hospitalvisble:false,
                news_info:[],
                visble: false,
                phonevisble:false,
            }
        },
        mounted() {
            this.timer = setInterval(this.dg_change, 1000);
            this.create();
        },
        methods:{
            create() {
                axios.post("http://119.29.60.153:8001/doctorservice/news-info/getAll").then(resp => {
                    this.news_info=resp.data.data.list;
                })

            },
            gotoweixin(){

            }

        }

    }

</script>

<style scoped>
.Nav{
    padding: 20px;
    display:inline-block;
    border-left: 1px solid #5bafe5;
    width: 100px;
    text-align: center;
}
    .four{
        padding-top: 10px;
        margin-left: 210px;
        background-color: #f0f0f0;;
    }
    .six{
        padding-top: 10px;
        margin-left: 210px;
        background-color: #f0f0f0;;
    }

.four .four_seven{
    width: 310px;
    height: 130px;
    color: white;
    background-color: #3a87d1;
    display: inline-block;
    position: relative;
}
.four .four_seven img{
     margin-top: 30px;
 }
.four .four_xxx{
    width: 310px;
    height: 130px;
    color: white;
    background-color: #6688c3;
    display: inline-block;
    position: relative;
    left: 10px;

}
.four .four_xxx img{
     margin-top: 30px;
 }
.four .four_yyy{
    width: 310px;
    height: 130px;
    color: white;
    background-color: #64c881;
    display: inline-block;
    position: relative;
    left: 20px;
    top:4px
}
.four .four_yyy img{
    margin-top: 30px;
}
.four .four_zzz{
    width: 310px;
    height: 130px;
    color: white;
    background-color: #bd91f2;
    display: inline-block;
    position: relative;
    left: 30px;
    top:4px
}
.four .four_zzz img{
    margin-top: 30px;
}
.four .four_aaa{
    width: 220px;
    height: 130px;
    color: white;
    background-color: #bd91f2;
    display: inline-block;
    position: relative;
    left: 40px;
    top:2px
}
.four .four_aaa img{
    margin-top: 30px;
}
.four .four_bbb{
    width: 120px;
    height: 130px;
    color: white;
    background-color: #bd91f2;
    display: inline-block;
    position: relative;
    left: 50px;
    top:2px
}
.four .four_bbb img{
    margin-top: 30px;
}



.six .six_seven{
    width: 310px;
    height: 130px;
    color: white;
    background-color: #3a87d1;
    display: inline-block;
    position: relative;
}
.six .six_seven img{
    margin-top: 30px;
}
.six .six_xxx{
    width: 310px;
    height: 130px;
    color: white;
    background-color: #6688c3;
    display: inline-block;
    position: relative;
    left: 10px;

}
.six .six_xxx img{
    margin-top: 30px;
}
.six .six_yyy{
    width: 310px;
    height: 130px;
    color: white;
    background-color: #64c881;
    display: inline-block;
    position: relative;
    left: 20px;
    top:4px
}
.six .six_yyy img{
    margin-top: 30px;
}
.six .six_zzz{
    width: 310px;
    height: 130px;
    color: white;
    background-color: #bd91f2;
    display: inline-block;
    position: relative;
    left: 30px;
    top:1px
}
.six .six_zzz img{
    margin-top: 30px;
}
.five{
    color: white;
    background-color: #519fd2;
    height: 30px;
    padding-top: 15px;
}
</style>